<template>
  <a-empty v-if="!data.length" />
  <div v-else class="questionBankDetail">
    <a-layout>
      <a-layout-sider :width="300" id="sider">
        <a-menu
          :style="{ width: '100%', height: '100%' }"
          :default-open-keys="['0']"
          :default-selected-keys="['0_2']"
          breakpoint="xl"
          @menu-item-click="handleMenuItemClick"
        >
          <a-menu-item v-for="e in data" :key="e.id">
            {{ e.title }}
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <div id="hcdiv">
        <a-layout-header id="header">
          <a-typography-title :heading="2"
            >{{ questionData?.title }}
          </a-typography-title>
          <a-typography-title :heading="5"
            ><a-tag
              v-for="e in questionData?.tagList"
              :key="e"
              color="arcoblue"
              style="margin-right: 10px"
              >{{ e }}</a-tag
            >
          </a-typography-title>
        </a-layout-header>
        <div v-show="questionData?.answer">
          <br />
          <hr />
          <br />
        </div>
        <a-layout-content>
          <MdViewer :value="questionData?.answer"></MdViewer>
        </a-layout-content>
      </div>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import {
  QuestionBankQuestionControllerService,
  QuestionControllerService,
} from "../../../generated";
import MdViewer from "@/components/MdViewer.vue";

const route = useRoute();
const data = reactive([]);
const questionData = ref();

function handleMenuItemClick(key: string) {
  QuestionControllerService.getQuestionVoByIdUsingGet(key).then((res) => {
    questionData.value = res.data;
  });
}

onMounted(async () => {
  await QuestionBankQuestionControllerService.getQuestionByBankIdUsingPost(
    route.query["id"]
  ).then((res) => {
    if (res.code === 0) {
      Object.assign(data, res.data);
    }
  });
});
</script>

<style scoped>
#sider {
}
#hcdiv {
  margin-left: 50px;
  width: 100%;
}
</style>
